<template>
    <div class="experience">
        <div class="experience-top" v-show="topTitle">
            <div class="experience-top-title">
                <h3>{{ experienceText }}</h3>
            </div>
            <div class="experience-top-fun" v-if="num == 1">
                <el-button type="primary" plain @click="delCheckedExperience">删除</el-button>
                <el-button type="primary" @click="addPackage">新增套餐信息</el-button>
            </div>
            <div class="experience-top-fun" v-else-if="num == 2">
                <el-button type="primary" plain @click="delCheckedPackage">删除</el-button>
                <el-button type="primary" @click="addPackage">新增项目信息</el-button>
            </div>
            <div class="experience-top-fun" v-else="num==3">
                <el-button type="primary" @click="addPackage">新增套餐类型</el-button>
            </div>
        </div>
        <div class="experience-top" v-show="!topTitle">
            <div class="experience-top-title">
                <h3>{{ addExperienceText }}</h3>
            </div>
        </div>
        <div class="experience-tab" v-show="tabshow">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="experience-tab-title" style="font-size: 20px;">
                <el-tab-pane label="体检套餐" name="first">
                    <div class="package-from">
                        <!-- 搜索区 -->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item>
                                <el-select @change="serachPhy" v-model="formInline.region" placeholder="请选择套餐类型"
                                    style="width: 160px;">
                                    <el-option label="男性套餐" :value="1"></el-option>
                                    <el-option label="女性套餐" :value="2"></el-option>
                                    <el-option label="老年人套餐" :value="3"></el-option>
                                    <el-option label="入职套餐" :value="4"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="formInline.user" @blur="searchExperience" ref="physicalName" placeholder="请输入套餐类型"
                                    style="width: 320px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchExperience">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- table区 -->
                        <el-table ref="multipleTable"
                            :data="experiencePro.slice((currentPage1 - 1) * pageSize1, currentPage1 * pageSize1)"
                            tooltip-effect="dark" style="width: 100%"
                            @selection-change="(selection) => { changeCheck1(selection) }">
                            <el-table-column type="selection" width="55" align="center">
                            </el-table-column>
                            <el-table-column prop="id" label="套餐ID" show-overflow-tooltip align="center">
                            </el-table-column>
                            <el-table-column prop="setMealName" width="130" label="套餐名称" align="center">
                            </el-table-column>
                            <el-table-column label="套餐图片" align="center">
                                <img src="../../../public/images/hospital/套餐图片.png" style="width: 32px;" alt="">
                            </el-table-column>
                            <el-table-column prop="setMealType" label="套餐类型" align="center">
                                <template slot-scope="scope">
                                    <span>{{ packTypeDic[scope.row.setMealType - 1] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="inpatientArea" label="使用院区" align="center">
                                <template slot-scope="scope">
                                    <span>{{ packDisDic[scope.row.inpatientArea - 1] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="setMealPrice" label="套餐价格(元)" width="105" align="center">
                            </el-table-column>
                            <el-table-column prop="setMealItem" label="套餐项目" show-overflow-tooltip width="150"
                                align="center">
                            </el-table-column>
                            <el-table-column prop="setMealState" label="套餐状态" align="center">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.setMealState"
                                        @change="changeState1(scope.row.id)"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination :current-page="currentPage1" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize1"
                            layout="total, sizes, prev, pager, next, jumper" :total="total1" class="page-cur"
                            @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="体检项目" name="second">
                    <div class="package-from">
                        <!-- 搜索区 -->
                        <el-form :inline="true" :model="fromPro" class="demo-form-inline">
                            <el-form-item>
                                <el-input @blur="searchPackage" v-model="fromPro.user" ref="projectName" placeholder="请输入套餐名称"
                                    style="width: 320px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchPackage">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- table区 -->
                        <el-table ref="multipleTable"
                            :data="physicalPro.slice((currentPage2 - 1) * pageSize2, currentPage2 * pageSize2)"
                            tooltip-effect="dark" style="width: 100%"
                            @selection-change="(selection) => { changeCheck2(selection) }">
                            <el-table-column type="selection" width="55" align="center">
                            </el-table-column>
                            <el-table-column prop="id" label="项目ID" show-overflow-tooltip align="center">
                            </el-table-column>
                            <el-table-column prop="setMealName" label="项目名称" align="center">
                            </el-table-column>
                            <el-table-column prop="setMealPrice" label="项目价格(元)" align="center">
                            </el-table-column>
                            <el-table-column prop="setMealType" label="所属套餐" align="center">
                                <template slot-scope="scope">
                                    <span>{{ physicalDIC[scope.row.setMealType - 1] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="setMealItem" show-overflow-tooltip label="项目介绍" align="center">
                            </el-table-column>
                            <el-table-column prop="attention" label="注意事项" width="105" align="center">
                            </el-table-column>
                            <el-table-column prop="setMealState" label="项目状态" align="center">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.physicalState"
                                        @change="changeState2(scope.row.id)"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleDelete2(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination :current-page="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize2"
                            layout="total, sizes, prev, pager, next, jumper" :total="total2" class="page-cur"
                            @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="套餐类型" name="third">
                    <el-table ref="multipleTable"
                        :data="packagePro.slice((currentPage3 - 1) * pageSize3, currentPage3 * pageSize3)"
                        tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="setMealName" label="类型名称" align="center">
                        </el-table-column>
                        <el-table-column prop="setMealNum" label="套餐数量" align="center">
                        </el-table-column>
                        <el-table-column prop="setMealItem" width="400" label="包含套餐" align="center">
                        </el-table-column>
                        <el-table-column prop="setMealState" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.packageState"
                                    @change="changeState3(scope.row.id)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit3(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click="handleDelete3(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination :current-page="currentPage3" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize3"
                        layout="total, sizes, prev, pager, next, jumper" :total="total3" class="page-cur"
                        @size-change="handleSizeChange3" @current-change="handleCurrentChange3">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="add-experience" v-show="!tabshow && num == 1">
            <div class="add-experience-title">编辑套餐信息</div>
            <div class="experience-from">
                <el-form :model="packForm" :rules="rules" ref="packForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="套餐名称" prop="name">
                        <el-input v-model="packForm.name" placeholder="请输入套餐名称" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="上传照片" prop="photo">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="套餐类型" prop="type">
                        <el-select v-model="packForm.type" placeholder="请选择套餐类型" style="width: 320px;">
                            <el-option label="男性套餐" :value="1"></el-option>
                            <el-option label="女性套餐" :value="2"></el-option>
                            <el-option label="老年人套餐" :value="3"></el-option>
                            <el-option label="入职套餐" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属院区" prop="dis">
                        <el-select v-model="packForm.dis" placeholder="请选择所属院区" style="width: 320px;">
                            <el-option label="湘南院区" :value="1"></el-option>
                            <el-option label="东院" :value="2"></el-option>
                            <el-option label="北院" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐项目" prop="tag">
                        <div :class="isactive ? 'perience-tag active' : 'perience-tag'" @click="tagPer">
                            <span class="perience-span">{{ projectText }}</span>
                            <i :class="tagShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                            <ul class="doctor-tag-ul" v-show="tagShow">
                                <li class="doctor-tag-li" v-for="m in projectList" :key="m.id" @click.stop="checkPer(m.id)">
                                    <input type="checkbox" :checked="m.ischeck ? true : false">{{ m.context }}<span
                                        class="doctor-tag-price">￥{{ m.price }}</span>
                                </li>
                                <div class="doctor-tag-sel">
                                    <span class="sel-cancel" @click.stop="selCancel">取消</span>
                                    <span class="sel-define" @click.stop="selDefine">确定</span>
                                </div>
                            </ul>
                        </div>
                    </el-form-item>
                    <el-form-item label="套餐价格" prop="price">
                        <el-input v-model="packForm.price" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐介绍" prop="introduce">
                        <el-input type="textarea" v-model="packForm.introduce" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="注意事项" prop="note">
                        <el-input type="textarea" v-model="packForm.note" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐状态" prop="delivery">
                        <el-switch v-model="packForm.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="preserve('packForm')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="add-experience" v-show="!tabshow && num == 2">
            <div class="add-experience-title">编辑项目信息</div>
            <div class="experience-from">
                <el-form :model="physicalFrom" :rules="physical" ref="physicalFrom" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="physicalFrom.name" placeholder="请输入套餐名称" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="所属套餐" prop="tag">
                        <el-select v-model="physicalFrom.tag" placeholder="请选择所属套餐" style="width: 320px;">
                            <el-option label="老年人基础套餐A" :value="1"></el-option>
                            <el-option label="老年人基础套餐B" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目价格" prop="price">
                        <el-input v-model="physicalFrom.price" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="项目介绍" prop="introduce">
                        <el-input type="textarea" v-model="physicalFrom.introduce" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="注意事项" prop="note">
                        <el-input type="textarea" v-model="physicalFrom.note" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="项目状态" prop="delivery">
                        <el-switch v-model="physicalFrom.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="preservePhysical('physicalFrom')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="add-experience" v-show="!tabshow && num == 3">
            <div class="add-experience-title">编辑项目类型</div>
            <div class="experience-from">
                <el-form :model="packageType" :rules="package" ref="packageType" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="packageType.name" placeholder="请输入套餐类型名称" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="所含套餐数量" prop="sum">
                        <el-input v-model="packageType.sum" placeholder="请输入套餐数量" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="包含套餐" prop="packages">
                        <div :class="isactive ? 'perience-tag active' : 'perience-tag'" @click="tagPer">
                            <span class="perience-span">{{ containText }}</span>
                            <i :class="tagShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                            <ul class="doctor-tag-ul" v-show="tagShow">
                                <li class="doctor-tag-li" v-for="m in containPack" :key="m.id"
                                    @click.stop="checkPack(m.id)">
                                    <input type="checkbox" :checked="m.ischeck ? true : false">{{ m.context }}
                                </li>
                                <div class="doctor-tag-sel">
                                    <span class="sel-cancel" @click.stop="conCancel">取消</span>
                                    <span class="sel-define" @click.stop="conDefine">确定</span>
                                </div>
                            </ul>
                        </div>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input type="textarea" v-model="packageType.description" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="delivery">
                        <el-switch v-model="packageType.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="preserveContain('packageType')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { getPhysicalList, delPhysical, updataPhysical, addPhysical, getProjectList, delProject, updataProject, addProject, getTypeList, delType, updataType, addType } from "@/api/hospital/Experience";
export default {
    name: 'ExperiencePackage',
    data() {
        return {
            // 分页器
            // 体检套餐
            // 判断是修改用户还是添加用户
            isupdata1: false,
            // 分页器默认显示第一页
            currentPage1: 1,
            // 分页器默认每页10条
            pageSize1: 10,
            // 分页器总数据
            total1: 0,
            // 体检项目
            // 判断是修改用户还是添加用户
            isupdata2: false,
            // 分页器默认显示第一页
            currentPage2: 1,
            // 分页器默认每页10条
            pageSize2: 10,
            // 分页器总数据
            total2: 0,
            // 套餐类型
            // 体检项目
            // 判断是修改用户还是添加用户
            isupdata3: false,
            // 分页器默认显示第一页
            currentPage3: 1,
            // 分页器默认每页10条
            pageSize3: 10,
            // 分页器总数据
            total3: 0,
            // 选择科室数据
            // 字典
            packTypeDic: ['男性套餐', '女性套餐', '老年人套餐', '入职套餐'],
            packDisDic: ['湘南院区', '东院', '北院'],
            physicalDIC: ['老年人基础套餐A', '老年人基础套餐B'],
            // tab切换默认选中第几个
            activeName: 'first',
            // 搜索区
            // 体检套餐
            formInline: {  
                user: '',
                region: ''
            },
            // 体检项目
            fromPro: {
                user: ''
            },
            // table
            // 体检套餐数据
            packData: [],
            // 表头数据
            experienceText: '体检套餐管理',
            // 新增表头信息
            addExperienceText: '新增套餐信息',
            // tab标题信息
            tabText: '体检套餐',
            // 是管理页面还是新增页面
            topTitle: true,
            // 新增弹窗是否出现
            tabshow: true,
            // tab切换中间值
            num: 1,
            // 新增套餐表单内容
            packForm: {
                id: '',
                name: '',
                photo: '',
                type: '',
                dis: '',
                price: '',
                introduce: '',
                note: '',
                tag: '',
                delivery: false
            },
            rules: {
                name: [
                    { required: true, message: '请输入套餐名称', trigger: 'blur' },
                    // { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                ],
                photo: [
                    { required: false, message: '请选择照片', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择套餐类型', trigger: 'change' }
                ],
                dis: [
                    { required: true, message: '请选择所属院区', trigger: 'change' }
                ],
                tag: [
                    { required: false, message: '请选择套餐项目', trigger: 'change' }
                ],
                price: [
                    { required: false, message: '请填写套餐价格', trigger: 'blur' }
                ],
                introduce: [
                    { required: false, message: '请填写套餐介绍', trigger: 'blur' }
                ],
                note: [
                    { required: false, message: '请填写注意事项', trigger: 'blur' }
                ]
            },
            // 体检项目数据
            physicalFrom: {
                name: '',
                price: '',
                introduce: '',
                note: '',
                tag: '',
                delivery: false
            },
            physical: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    // { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                ],
                tag: [
                    { required: true, message: '请选择套餐项目', trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请填写套餐价格', trigger: 'blur' }
                ],
                introduce: [
                    { required: true, message: '请填写套餐介绍', trigger: 'blur' }
                ],
                note: [
                    { required: true, message: '请填写注意事项', trigger: 'blur' }
                ]
            },
            // 项目类型
            packageType: {
                name: '',
                sum: '',
                packages: '',
                description: '',
                delivery: false
            },
            package: {
                name: [
                    { required: true, message: '请输入类型名称', trigger: 'blur' },
                    // { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                ],
                packages: [
                    { required: false, message: '请选择套餐', trigger: 'change' }
                ],
                sum: [
                    { required: true, message: '请填写套餐数量', trigger: 'blur' }
                ],
                description: [
                    { required: false, message: '请填写描述', trigger: 'blur' }
                ]
            },
            // 体检套餐数据
            experiencePro: [],
            checkedExperiencePro: [],
            physicalPro: [],
            checkedPhysicalPro: [],
            packagePro: [],
            // 套餐项目
            projectList: [
                { id: 1, context: '一般检查', price: '100.00', ischeck: false },
                { id: 2, context: '内科检查', price: '200.00', ischeck: false },
                { id: 3, context: '外科检查', price: '140.00', ischeck: false },
                { id: 4, context: '血常规', price: '120.00', ischeck: false },
                { id: 5, context: '尿常规', price: '100.00', ischeck: false },
                { id: 6, context: '肝功能常规', price: '150.00', ischeck: false }
            ],
            // 包含套餐
            containPack: [
                { id: 1, context: '老年人基础套餐A', ischeck: false },
                { id: 2, context: '老年人基础套餐B', ischeck: false },
                { id: 3, context: '三高人群定期检查', ischeck: false },
            ],
            // 选择套餐项目文本
            projectText: '请选择套餐项目',
            // 所属套餐项目文本
            containText: '请选择套餐',
            // 是否点击了选择套餐项目
            isactive: false,
            // 选择套餐项目下拉是否出现
            tagShow: false,
            // 上传图片
            dialogImageUrl: '',
            dialogVisible: false,
        }
    },
    methods: {
        // 体检套餐
        // 改变状态
        async changeState1(id) {
            this.experiencePro.filter(item => {
                item.id == id ? !item.setMealState : item.setMealState
            })
            let _obj = this.experiencePro.filter(item => {
                return item.id == id
            })
            await updataPhysical(id, _obj[0])
        },
        // 搜索
        async searchExperience() {
            let _val = this.$refs.physicalName.value
            if (_val.trim() != '') {
                let _arr = await getPhysicalList()
                let _list = []
                let _mealType = ['男性套餐', '女性套餐', '老年人套餐', '入职套餐']

                _mealType.forEach((item, index) => {
                    if (item.indexOf(_val) >= 0) {
                        _arr.data.forEach(item => {
                            if (item.setMealType == (index + 1)) {
                                _list.push(item)
                            }
                        })
                        this.formInline.region = _mealType[index]
                    }
                })

                this.currentPage1 = 1
                this.pageSize1 = 10
                this.experiencePro = _list
                this.total1 = this.experiencePro.length
                

            } else {
                this.getPhysicals()
            }

        },
        // 下拉框搜索
        async serachPhy(e) {
            let _arr = await getPhysicalList()
            let _list = []
            
            _arr.data.forEach(item => {
                if (item.setMealType == e) {
                    _list.push(item)
                }
            })

            this.formInline.user = ''

            this.currentPage1 = 1
            this.pageSize1 = 10
            this.experiencePro = _list
            this.total1 = this.experiencePro.length
        },
        // 选中数据
        changeCheck1(selection) {
            // console.log(selection);
            this.checkedExperiencePro = selection
        },
        delCheckedExperience() {
            if (confirm('确定要删除所选中的数据吗？')) {
                this.checkedExperiencePro.forEach(async item => {
                    await delPhysical(item.id)
                })
            }
            this.getPhysicals()
        },
        // 分页器
        // 每页多少条数据
        handleSizeChange1(val) {
            this.pageSize1 = val
        },
        // 最新页数
        handleCurrentChange1(val) {
            this.currentPage1 = val
        },
        // 获取体检套餐最新数据
        async getPhysicals() {
            let _res = await getPhysicalList()
            this.experiencePro = _res.data
            this.total1 = this.experiencePro.length
        },
        // 体检套餐table中的编辑
        handleEdit1(index, row) {
            this.isupdata1 = true
            this.tabshow = false
            this.topTitle = false
            this.addExperienceText = '新增套餐信息'
            this.packForm.id = row.id
            this.packForm.name = row.setMealName
            this.packForm.type = row.setMealType
            this.packForm.dis = row.inpatientArea
            this.packForm.price = row.setMealPrice
            this.projectText = row.setMealItem
            this.packForm.delivery = row.setMealState
        },
        // 体检套餐table中的删除
        async handleDelete1(index, row) {
            if (confirm('确定要删除吗？')) {
                await delPhysical(row.id)
                this.getPhysicals()
            }
        },
        // 体检项目
        // 搜索
        async searchPackage() {

            let _val = this.$refs.projectName.value
            if (_val.trim() != '') {
                let _arr = await getProjectList()
                let _list = []
                let _mealType = ['老年人基础套餐A', '老年人基础套餐B']
                _mealType.forEach((item, index) => {

                    if (item.indexOf(_val) >= 0) {
                        _arr.data.forEach(item => {
                            if (item.setMealType == (index + 1)) {
                                _list.push(item)
                            }
                        })
                    }
                })
                this.currentPage1 = 1
                this.pageSize1 = 10
                this.physicalPro = _list
                this.total2 =  this.physicalPro.length
            } else {
                this.getProjects()
            }
            this.formInline.user = ''



            // let _val = this.$refs.projectName.value
            // if (_val.trim() != '') {
            //     let _arr = await getProjectList()
            //     let _list = []
            //     _arr.data.forEach(item => {
            //         if (item.setMealType.indexOf(_val) >= 0) {
            //             _list.push(item)
            //         }
            //     })
            //     this.physicalPro = _list
            // } else {
            //     this.getProjects()
            // }
            // this.formInline.user = ''
        },
        // 删除所选
        changeCheck2(selection) {
            this.checkedPhysicalPro = selection
        },
        delCheckedPackage() {
            if (confirm('确定要删除所选中的数据吗？')) {
                this.checkedPhysicalPro.forEach(async item => {
                    await delProject(item.id)
                })
            }
            this.getProjects()
        },
        // 改变项目状态
        async changeState2(id) {
            this.physicalPro.filter(item => {
                item.id == id ? !item.setMealState : item.setMealState
            })
            let _obj = this.physicalPro.filter(item => {
                return item.id == id
            })
            await updataProject(id, _obj[0])
        },
        // 获取最新的体检项目数据
        async getProjects() {
            let _res = await getProjectList()
            this.physicalPro = _res.data
            this.total2 = this.physicalPro.length
        },
        // 分页器
        // 每页多少条数据
        handleSizeChange2(val) {
            this.pageSize2 = val
        },
        // 最新页数
        handleCurrentChange2(val) {
            this.currentPage2 = val
        },
        // 体检套餐table中的编辑
        handleEdit2(index, row) {
            this.isupdata2 = true
            this.tabshow = false
            this.topTitle = false
            this.addExperienceText = '新增项目信息'
            this.physicalFrom.id = row.id
            this.physicalFrom.name = row.setMealName
            this.physicalFrom.note = row.attention
            this.physicalFrom.price = row.setMealPrice
            this.physicalFrom.introduce = row.setMealItem
            this.physicalFrom.tag = row.setMealType
            this.physicalFrom.delivery = row.setMealState
        },
        // 体检套餐table中的删除
        async handleDelete2(index, row) {
            if (confirm('确定要删除吗？')) {
                await delProject(row.id)
                this.getProjects()
            }
        },
        // 套餐类型
        // 获取最新的套餐类型数据
        async getTypes() {
            let _res = await getTypeList()
            this.packagePro = _res.data
            this.total3 = this.packagePro.length
        },
        // 分页器
        // 每页多少条数据
        handleSizeChange3(val) {
            this.pageSize3 = val
        },
        // 最新页数
        handleCurrentChange3(val) {
            this.currentPage3 = val
        },
        // 体检套餐table中的编辑
        handleEdit3(index, row) {
            this.isupdata3 = true
            this.tabshow = false
            this.topTitle = false
            this.addExperienceText = '新增套餐类型'
            this.packageType.id = row.id
            this.packageType.name = row.setMealName
            this.packageType.sum = row.setMealNum
            this.containText = row.setMealItem
            this.packageType.delivery = row.setMealState
        },
        // 体检套餐table中的删除
        async handleDelete3(index, row) {
            if (confirm('确定要删除吗？')) {
                await delType(row.id)
                this.getTypes()
            }
        },
        // 改变套餐状态
        async changeState3(id) {
            this.packagePro.filter(item => {
                item.id == id ? !item.setMealState : item.setMealState
            })
            let _obj = this.packagePro.filter(item => {
                return item.id == id
            })
            await updataType(id, _obj[0])
        },
        // tab切换时触发的事件
        handleClick(tab, event) {
            // console.log(tab, event);
            if (tab.label == '体检套餐') {
                this.tabText = '体检套餐'
                this.num = 1
                this.experienceText = '体检套餐管理'
            } else if (tab.label == '体检项目') {
                this.tabText = '体检项目'
                this.num = 2
                this.experienceText = '体检项目管理'
            } else if (tab.label == '套餐类型') {
                this.tabText = '套餐类型'
                this.num = 3
                this.experienceText = '套餐类型管理'
            }
        },
        // 点击新增按钮
        addPackage() {
            if (this.num == 1) {
                this.packForm = {}
                this.isupdata1 = false
                this.tabshow = false
                this.topTitle = false
                this.addExperienceText = '新增套餐信息'
            } else if (this.num == 2) {
                this.physicalFrom = {}
                this.isupdata2 = false
                this.tabshow = false
                this.topTitle = false
                this.addExperienceText = '新增项目信息'
            } else {
                this.packageType = {}
                this.isupdata3 = false
                this.tabshow = false
                this.topTitle = false
                this.addExperienceText = '新增套餐类型'
            }
        },
        // 新增套餐
        // 保存按钮
        preserve(formName) {
            if (this.isupdata1) {
                let _id = this.$refs[formName].$options.propsData.model.id
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: _id,
                            setMealName: this.packForm.name,
                            setMealType: this.packForm.type,
                            inpatientArea: this.packForm.dis,
                            setMealPrice: this.packForm.price,
                            setMealItem: this.projectText,
                            setMealState: this.packForm.delivery,
                            isChecked: false,
                            isdelete: 0
                        }
                        await updataPhysical(_id, arr)
                        this.getPhysicals()
                        this.tabshow = true
                        this.topTitle = true
                        alert('修改成功!');
                    } else {
                        return false;
                    }
                });
            } else {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: nanoid(),
                            setMealName: this.packForm.name,
                            setMealType: this.packForm.type,
                            inpatientArea: this.packForm.dis,
                            setMealPrice: this.packForm.price,
                            setMealItem: this.projectText,
                            setMealState: this.packForm.delivery,
                            isChecked: false,
                            isdelete: 0
                        }
                        await addPhysical(arr)
                        this.getPhysicals()
                        this.tabshow = true
                        this.topTitle = true
                        alert('保存成功!');
                    } else {
                        return false;
                    }
                });
            }

        },
        preservePhysical(formName) {
            if (this.isupdata2) {
                let _id = this.$refs[formName].$options.propsData.model.id
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: _id,
                            setMealName: this.physicalFrom.name,
                            setMealType: this.physicalFrom.tag,
                            setMealPrice: this.physicalFrom.price,
                            setMealItem: this.physicalFrom.introduce,
                            setMealState: this.physicalFrom.delivery,
                            attention: this.physicalFrom.note,
                            isChecked: false,
                            isdelete: 0
                        }
                        await updataProject(_id, arr)
                        this.getProjects()
                        this.tabshow = true
                        this.topTitle = true
                        alert('修改成功!');
                    } else {
                        return false;
                    }
                });
            } else {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: nanoid(),
                            setMealName: this.physicalFrom.name,
                            setMealType: this.physicalFrom.tag,
                            setMealPrice: this.physicalFrom.price,
                            setMealItem: this.physicalFrom.introduce,
                            setMealState: this.physicalFrom.delivery,
                            attention: this.physicalFrom.note,
                            isChecked: false,
                            isdelete: 0
                        }
                        await addProject(arr)
                        this.getProjects()
                        this.tabshow = true
                        this.topTitle = true
                        alert('保存成功!');
                    } else {
                        return false;
                    }
                });
            }
        },
        preserveContain(formName) {
            if (this.isupdata3) {
                let _id = this.$refs[formName].$options.propsData.model.id
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: _id,
                            setMealName: this.packageType.name,
                            setMealNum: this.packageType.sum,
                            setMealItem: this.containText,
                            setMealState: this.packageType.delivery,
                            isChecked: false,
                            isdelete: 0
                        }
                        await updataType(_id, arr)
                        this.getTypes()
                        this.tabshow = true
                        this.topTitle = true
                        alert('修改成功!');
                    } else {
                        return false;
                    }
                });
            } else {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let arr = {
                            id: nanoid(),
                            setMealName: this.packageType.name,
                            setMealNum: this.packageType.sum,
                            setMealItem: this.packageType.packages,
                            setMealState: this.packageType.delivery,
                            isChecked: false,
                            isdelete: 0
                        }
                        await addType(arr)
                        this.getTypes()
                        this.tabshow = true
                        this.topTitle = true
                        alert('保存成功!');
                    } else {
                        return false;
                    }
                });
            }

        },
        // 取消按钮
        cancel() {
            this.tabshow = true
            this.topTitle = true
        },
        // 选择套餐项目
        tagPer() {
            this.isactive = !this.isactive
            this.tagShow = !this.tagShow
        },
        checkPer(id) {
            this.projectList.filter(item => {
                if (item.id == id) {
                    item.ischeck = !item.ischeck
                }
            })
        },
        // 选择包含套餐
        checkPack(id) {
            this.containPack.filter(item => {
                if (item.id == id) {
                    item.ischeck = !item.ischeck
                }
            })
        },
        // 套餐项目中的取消按钮
        selCancel() {
            this.tagShow = false
        },
        // 套餐项目中的确定按钮
        selDefine() {
            this.packForm.tag = ''
            let _num = 0
            this.projectList.filter(item => {
                if (item.ischeck) {
                    _num += parseFloat(item.price)
                    this.packForm.price = _num
                    this.packForm.tag += item.context + ' '
                    this.projectText = this.packForm.tag
                }
            })
            this.tagShow = false
        },
        // 包含套餐中的取消按钮
        conCancel() {
            this.tagShow = false
        },
        // 包含套餐中的确定按钮
        conDefine() {
            this.packageType.packages = ''
            this.containPack.filter(item => {
                if (item.ischeck) {
                    this.packageType.packages += item.context + ' '
                    this.containText = this.packageType.packages
                }
            })
            this.tagShow = false
        },
        // 体检套餐table中的编辑
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 体检套餐table中的删除
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 上传图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    mounted() {
        this.getPhysicals()
        this.getProjects()
        this.getTypes()
    }
}
</script>
<style scoped lang="scss">
.experience-top {
    display: flex;
    justify-content: space-between;
    height: 70px;

    .experience-top-title {
        h3 {
            font-size: 28px;
            margin-left: 50px;
            font-weight: 400;
            position: relative;
        }

        h3::before {
            content: '';
            display: block;
            width: 30px;
            height: 10px;
            background-color: rgba(0, 110, 255, 1);
            position: absolute;
            border-radius: 5px;
            top: 15px;
            left: -50px;
        }
    }
}

.experience-tab {
    width: 100%;
    box-sizing: border-box;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgb(215, 215, 215);
    padding: 20px;
}

.add-experience {
    width: 100%;
    box-sizing: border-box;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgb(215, 215, 215);

    .add-experience-title {
        background-color: rgba(242, 242, 242, 1);
        border-radius: 8px 8px 0 0;
        color: #006EFF;
        padding: 20px;
    }

    .experience-from {
        padding: 20px;
        box-sizing: border-box;

        // 选择套餐项目
        .perience-tag {
            width: 320px;
            height: 40px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
            line-height: 40px;
            font-size: 14px;
            position: relative;

            .perience-span {
                overflow: hidden;
                text-overflow: ellipsis;
                /*禁止换行显示*/
                white-space: nowrap;
            }

            .el-icon-arrow-up,
            .el-icon-arrow-down {
                line-height: 40px;
                transform: translateX(5px)
            }

            .doctor-tag-ul {
                width: 320px;
                background-color: #fff;
                border-radius: 4px;
                box-sizing: border-box;
                border: 1px solid #b3d8ff;
                position: absolute;
                top: 45px;
                left: 0;
                z-index: 999;

                .doctor-tag-li {
                    height: 40px;
                    padding-left: 20px;

                    .doctor-tag-price {
                        color: rgb(244, 97, 97);
                    }
                }

                .doctor-tag-li:hover {
                    background-color: #b3d8ff;
                }

                .doctor-tag-sel {
                    width: 100%;
                    height: 40px;
                    text-align: right;
                    padding: 0 20px;
                    box-sizing: border-box;
                    font-size: 16px;

                    .sel-cancel {
                        color: #333;
                        margin-right: 15px;
                    }

                    .sel-define {
                        color: #409EFF;
                    }
                }
            }
        }
    }
}
</style>
<style>
.el-tabs__item {
    font-size: 20px;
}
</style>